<script setup lang="ts">
import { getCurrentInstance, ref, computed } from 'vue';
import { onPageScroll } from '@dcloudio/uni-app';
import { redirect } from '@/utils/common';
const props = defineProps(['url', 'model']);
const topNav = ref(false);
// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync();
let platform = systemInfo.platform;
let menuButtonInfo: any = {};
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif

// 导航栏内部盒子的样式
const navbarInnerStyle = computed(() => {
	let style = '';
	// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
	// #ifdef MP
	let rightButtonWidth = menuButtonInfo.width ? menuButtonInfo.width * 2 + 'rpx' : '70rpx';
	style += 'height:' + menuButtonInfo.height + 'px;';
	style += 'padding-right:calc(' + rightButtonWidth + ' + 30rpx);';
	style += 'padding-left:calc(' + rightButtonWidth + ' + 30rpx);';
	style += 'padding-top:' + menuButtonInfo.top + 'px;';
	style += 'padding-bottom: 8px;';

	style += 'font-size: 32rpx;';
	if (platform === 'ios') {
		// 苹果(iOS)设备
		style += 'font-weight: 500;';
	} else if (platform === 'android') {
		// 安卓(Android)设备
		style += 'font-size: 36rpx;';
	}
	// #endif

	// #ifdef H5
	style += 'height: 100rpx;';
	style += 'padding-right: 30rpx;';
	style += 'padding-left: 30rpx;';

	style += 'font-size: 32rpx;';
	if (platform === 'ios') {
		// 苹果(iOS)设备
		style += 'font-weight: 500;';
	} else if (platform === 'android') {
		// 安卓(Android)设备
		style += 'font-size: 36rpx;';
	}
	// #endif
	return style;
});

// 导航栏内部盒子的样式
const navbarInnerArrowStyle = computed(() => {
	let style = '';
	// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
	// #ifdef MP
	style += 'position: absolute;';
	style += 'left:calc( 100vw - ' + menuButtonInfo.right + 'px);';
	if (platform === 'ios') {
		// 苹果(iOS)设备
		style += 'font-weight: 700;';
	} else if (platform === 'android') {
		// 安卓(Android)设备
	}
	// #endif
	return style;
});

// 导航栏头部卡片样式
const fixedInnerStyle = computed(() => {
	let style = '';
	// #ifdef MP
	style += 'top:' + (menuButtonInfo.height + menuButtonInfo.top + 8) + 'px;';
	style += 'left:calc( 100vw - ' + menuButtonInfo.right + 'px);';
	// #endif
	// #ifdef H5
	style += 'top: 100rpx;';
	style += 'left: 30rpx;';
	// #endif
	return style;
});

// 头部滚动
const instance = getCurrentInstance();
let swiperHeight = 0;
let detailHead = 0;

const detailHeadBgChange = ref(false);
onPageScroll((e) => {
	if (swiperHeight == 0 || detailHead == 0) return;
	let height = swiperHeight - detailHead - 20;
	detailHeadBgChange.value = false;
	if (e.scrollTop >= height) {
		detailHeadBgChange.value = true;
	}
});
// 返回上一页
const backToPrevious = () => {
	if (props.url) {
		redirect({
			url: props.url,
			mode: props.model
		});
	} else if (getCurrentPages().length > 1) {
		uni.navigateBack({
			delta: 1
		});
	}
};
</script>
<template>
	<!-- 自定义头部 -->
	<view class="flex items-center fixed left-0 right-0 z-10 bg-transparent detail-head" :class="{ '!bg-[#fff]': detailHeadBgChange }" :style="navbarInnerStyle">
		<view class="flex-center h-[60rpx] rounded-[30rpx] box-border arrow-left px-[20rpx] leading-[1]" :style="navbarInnerArrowStyle">
			<text class="nc-iconfont nc-icon-zuoV6xx text-[18px]" @click="backToPrevious()"></text>
			<text class="w-[2rpx] h-[26rpx] bg-[#999] mx-[14rpx]"></text>
			<text class="nc-iconfont nc-icon-liebiao-xiV6xx1 text-[16px]" @click="topNav = true"></text>
		</view>
	</view>
</template>

<style lang="scss" scoped></style>
<style lang="scss"></style>
